<template>
	<view class="u-page">
		<!-- 2.0.19支持autoBack，默认为false -->
		<u-navbar bg-color="#3377cb" title="通知详情" safeAreaInsetTop 
			fixed placeholder :autoBack="true" @rightClick="rightClick"
			titleStyle="color:#ffffff; font-size:36rpx; letter-spacing: 4rpx;">
			<view class="u-nav-slot" slot="left" @click="close">
				<u-icon name="close" size="19"></u-icon> 
			</view>
			<view class="u-nav-slot" slot="right">
				<u-icon name="more-dot-fill" size="19"></u-icon> 
			</view>
		</u-navbar>
		<view class="u-page-context">
			<view class="u-title">
				<u--text :text="form.title" bold size="18" align="center"></u--text>
			</view>
			<view class="u-tips">
				<u--text :text="form.schoolName+'  '+form.dateTime" type="info" 
					size="10" align="center"></u--text>
			</view>
			<view class="u-context">
				<rich-text :nodes="form.context" class="u-parse-text"></rich-text>
			</view>
			<!-- 图片-->
			<view class="u_image_list">
				<view class="u_image_list_context">
					<u-album :urls="urls" :multipleSize="multipleSize"></u-album>
				</view>
			</view>
			<!-- 文件 -->
			<view v-for="(file, index) in form.fileList" class="u_file_list" @click="open(file.url)">
				<view class="file-image">
					<image src="/static/edu/doc.PNG" :style="fileStyle" v-if="file.type=='doc'"></image>
					<image src="/static/edu/xls.PNG" :style="fileStyle" v-if="file.type=='xls'"></image>
				</view>
				<view class="file-context">
					<u--text :text="file.fileName" size="14" type="info" align="center"></u--text>
				</view>
			</view>
			<view class="u-button-view">
				<u-button text="确定收到" size="normal" color="#3377cb" class="u_button" 
					:disabled="form.disable" @click="receiveNotice">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {uniLink} from '@dcloudio/uni-ui';
	import config from '@/common/config';
	export default {
		components: {
			uniLink
		},
		data() {
			return {
				multipleSize: 90,
				form: {
					omitTitle: '',
					title: '',
					context: '',
					schoolName: '',
					dateTime: '',
					imageList: [],
					fileList: [],
					disable: false,
				},
				urls: [
				]
			}
		},
		created() {
			this.getNoticeContext();
		},
		computed: {
			fileStyle() {
				const screenWidth = document.documentElement.clientWidth;
				const squareSize = screenWidth / 10;
				return `width: ${squareSize}px; height: ${squareSize}px;`;
			},
		},
		mounted() { 
			this.getElemWidth('.u-page-context').then(width => {
				 this.multipleSize = width / 3.5;
			}).catch(error => {
				console.error('Error:', error);
			});
		},
		methods: {
			getNoticeContext() {
				let id = this.$route.query.id;
				let param = {
					id: id
				};
				this.$u.api.getNoticeContext(param).then(res => {
					if(res.code =='200'){
						this.form = res.data;
						console.log(this.form);
						if (this.form.title.length > 20) {
							this.form.omitTitle = this.form.title.slice(0, 20).concat("...");
						} else {
							this.form.omitTitle = this.form.title;
						}
						if (this.form.imageList.length > 0) {
							this.form.imageList.forEach(item=>{
								item.url = config.baseUrl.concat(item.srcPath);
								this.urls.push(item.url);
							});	
						}
						if (this.form.fileList.length > 0) {
							this.form.fileList.forEach(item=>{
								item.type = this.setFileType(item.srcPath);
								item.url = config.baseUrl.concat(item.srcPath);
							});	
						}
					} 
				});
			},
			setFileType(fileName) {
				const extension = fileName.substring(fileName.lastIndexOf('.') + 1);
				if (extension == 'xls' || extension == 'xlsx' ) {
					return "xls";
				}
				if (extension == 'doc' || extension == 'docx' ) {
					return "doc";
				}
			},
			receiveNotice() {
				let id = this.$route.query.id;
				let param = {
					id : id
				};
				this.$u.api.receiveNotice(param).then(res => {
					if(res.code =='200'){
						uni.showToast({
							title: '已阅读',
							icon: 'success',
						});
						this.form.disable = true;
					} 
				});
			},
			getElemWidth(selector) {
			  return new Promise((resolve, reject) => {
			    uni.createSelectorQuery().select(selector).boundingClientRect(rect => {
			      if (rect) {
			        resolve(rect.width);
			      } else {
			        reject(new Error(`Element with selector '${selector}' not found.`));
			      }
			    }).exec();
			  });
			},
			open(url) {
				window.location.href = url;
			},
			close(){
				uni.navigateBack();
			} 
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		background-color: #ffffff;
	}
	/* #endif */
	
	.u-page {
		background-color: #ffffff;
	}
	.u-page-context {
		width: 90%;
		margin: 10rpx auto;
	}
	.u-title {
		text-align: center;
		letter-spacing: 4rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgb(192, 196, 204);
	}
	.u-tips {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.u-context {
		padding-bottom: 30rpx;
	}
	.u_image_list {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		width: 100%;
		padding-bottom: 30rpx;
	}
	.u_image_list_context {
		margin: 10rpx auto;
	}
	.u-button-view{
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
	}
	.u_file_list{
		margin-top: 20rpx;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		border: 1rpx solid #D8D8D8;
		border-radius: 3%;
	}
	.u_button {
		width: 80%;
		margin-bottom: 10px;
	}
	.u-parse-text {
		font-size: 30rpx;
		white-space: pre;
		word-break: break-word;
	}
	.file-image {
		margin-top: 10rpx;
		margin-left: 10rpx;
		margin-bottom: 6rpx;
	}
	.file-context {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}
</style>
